<template>
    <Header />
    <div v-if="movie" class="container">
      <h1>{{ movie.vtitle }}</h1>

      <img :src="movie.vimg" alt="Movie cover" />

      <p><strong>评分：</strong>{{ movie.score }}</p>
      <p><strong>分类：</strong>{{ movie.classify }}</p>
      <p><strong>主演：</strong>{{ movie.protagonist }}</p>
      <p><strong>描述：</strong>{{ movie.description }}</p>
      <p><strong>URL：</strong><a :href="movie.vurl" target="_blank">点击这里观看</a></p>
      <button @click="submitCollecton">添加收藏</button>


        <!-- 展示评论 -->
        <div class="comment-display">
        <h2>评论</h2>
        <ul>
          <li v-for="comment in comments" :key="comment.cid">{{ comment.content }}</li>
        </ul>
        </div>
        <!-- 评论表单 -->
        <div class="comment-form">
        <h2>提交评论</h2>
        <textarea v-model="newComment" placeholder="写下你的评论..."></textarea>
        <button @click="submitComment">提交评论</button>
        </div>

    </div>
    <Footer />
  </template>


<script>
import { getMovie } from '@/api/movie.js';
import commentApi from '@/api/comment.js';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import store from '@/store';
import {addCollect} from '@/api/collect.js';
import {ElMessage} from "element-plus";




export default {
  components:{
    Header,
    Footer
  },
  props: {
    vid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      movie: null,
      newComment: '',
      currentUid:0,
      comments: []
    };
  },
  async created() {
    const id = this.vid;
    console.log(id);
    this.currentUid = store.getters.getUser.name
    console.log("uid",this.currentUid)

    try {
      const movieData = await getMovie(id);
      this.movie = movieData.data.data;
      console.log(this.movie);

      // 获取该电影的评论
      const commentsData = await commentApi.fetchComments(id);
      this.comments = commentsData; // 将评论存储到 comments 中
    } catch (err) {
      console.error(err);
    }
  },
  methods: {
    async submitComment() {
      if (!this.newComment) {
        alert('评论内容不能为空！');
        return;
      }

      const commentData = {
        movie: { vid: this.movie.vid }, // 关联电影 ID
        content: this.newComment // 评论内容
      };

      try {
        await commentApi.submitComment(this.movie.vid, this.newComment);
        this.comments.push({ content: this.newComment }); // 更新评论列表
        this.newComment = ''; // 清空输入框*
      } catch (err) {
        console.error(err);
      }
    },

    submitCollecton: async function() {
      console.log(this.vid, this.currentUid);
      try {
        await addCollect({
          uid: this.currentUid,
          vid: this.vid,
        });

        ElMessage.success('添加成功');
      } catch (error) {
        console.error(error);
        ElMessage.error('添加失败');
      }
    }

  }
};
</script>



<style>

p{
    font-size: 22px;
}
.movie-details {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.movie-title {
    font-size: 2.5em; /* 增大标题字体 */
    color: #333;
    margin-bottom: 20px;
}

.movie-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.movie-info {
    margin-bottom: 20px;
    font-size: 18px; /* 增大信息字体 */
    color: #555;
}

.watch-link {
    color: #007BFF;
    text-decoration: none;
}

.watch-link:hover {
    text-decoration: underline;
}

.comment-display, .comment-form {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    background-color: #fff;
}

.comment-display h2, .comment-form h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 15px;
}

.comment-display ul {
    list-style-type: none;
    padding: 0;
}

.comment-display li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 6px;
    background-color: #f7f7f7;
    transition: background-color 0.3s;
    font-size: 22px; /* 增大评论字体 */
}

.comment-display li:hover {
    background-color: #e9ecef;
}

.comment-form textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    resize: vertical;
    font-size: 16px;
}

 button {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    background-color: #007BFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

 button:hover {
    background-color: #0056b3;
}
</style>
